<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <title>Change the content of a cell</title>
  <style type="text/css">
    body {
      margin: 30px;
    }

    table {
      border: 1px solid #000;
      margin: 0;
      padding: 0;
    }

    table td {
      border: 1px solid #000;
      padding: 0;
      margin: 0;
    }

    table tr {
      border: 1px solid #000;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id='content'>
    <!--
    <table border=1>
      <tr>
        <td>1行1列</td><td>1行2列</td>
      </tr>
      <tr>
        <td>2行1列</td><td>2行2列</td>
      </tr>
    </table>
  -->
  </div>

  <form>
    行：<input type='text' name='row' /> <br />
    列：<input type='text' name='col' /> <br />
    <input type="button" onclick="createTable()" value="创建表格">
  </form>

  <script>
    // 从表单获得行列值，在id=content的div里创建指定表格
    function createTable() {
      // ？？？
      let content = document.querySelector('#content')
      let row = document.getElementsByName('row')[0]
      let col = document.getElementsByName('col')[0]
      // let arr = [row.value, col.value]
      // console.log(arr);
      let tableNode = document.createElement('table')
      for (let x = 0; x < row.value; x++) {
        let trNode = tableNode.insertRow();
        for (let y = 0; y < col.value; y++) {
          let tdNode = trNode.insertCell();
          tdNode.innerHTML = `${x + 1}行${y + 1}列`;
        }
      }
      document.getElementById("content").appendChild(tableNode)

    }

  </script>
</body>

</html>